<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据分析仪表盘 | 工作效率监控</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="app-container">
        <!-- 顶部导航栏 -->
        <header class="header">
            <div class="logo">
                <i class="fas fa-chart-line"></i>
                <span>WorkTracker Pro</span>
            </div>
            <div class="mode-toggle">
                <button id="work-mode-btn" class="active">
                    <i class="fas fa-briefcase"></i> 工作模式
                </button>
                <button id="break-mode-btn">
                    <i class="fas fa-coffee"></i> 休息模式
                </button>
            </div>
            <div class="user-profile">
                <span id="current-time">00:00:00</span>
                <i class="fas fa-user-circle"></i>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="content">
            <!-- 工作模式界面 -->
            <div id="work-mode-panel" class="panel active">
                <div class="dashboard">
                    <div class="stat-card">
                        <h3>今日工作数据</h3>
                        <div class="stat-grid">
                            <div class="stat-item">
                                <span class="stat-value" id="focus-sessions">0</span>
                                <span class="stat-label">专注次数</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-value" id="total-work-time">0m</span>
                                <span class="stat-label">总工作时间</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-value" id="efficiency-rate">0%</span>
                                <span class="stat-label">工作效率</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-value" id="tasks-completed">0</span>
                                <span class="stat-label">已完成任务</span>
                            </div>
                        </div>
                    </div>

                    <div class="timer-card">
                        <div class="timer-display">
                            <div class="timer-circle">
                                <div class="timer-progress" id="timer-progress"></div>
                                <div class="timer-text">
                                    <span id="timer-minutes">25</span>:<span id="timer-seconds">00</span>
                                </div>
                            </div>
                        </div>
                        <div class="timer-controls">
                            <button id="start-timer"><i class="fas fa-play"></i> 开始专注</button>
                            <button id="pause-timer" disabled><i class="fas fa-pause"></i> 暂停</button>
                            <button id="reset-timer" disabled><i class="fas fa-redo"></i> 重置</button>
                        </div>
                        <div class="next-break">
                            <i class="fas fa-fish"></i> 
                            <span>下次休息时间: <span id="next-break-time">25:00</span></span>
                        </div>
                    </div>

                    <div class="task-card">
                        <h3>今日待办</h3>
                        <ul class="task-list" id="task-list">
                            <li>
                                <input type="checkbox" id="task1">
                                <label for="task1">完成季度报表</label>
                            </li>
                            <li>
                                <input type="checkbox" id="task2">
                                <label for="task2">客户会议准备</label>
                            </li>
                            <li>
                                <input type="checkbox" id="task3">
                                <label for="task3">更新项目文档</label>
                            </li>
                        </ul>
                        <div class="add-task">
                            <input type="text" id="new-task" placeholder="添加新任务...">
                            <button id="add-task-btn"><i class="fas fa-plus"></i></button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 休息模式界面 (摸鱼时间) -->
            <div id="break-mode-panel" class="panel">
                <div class="break-container">
                    <div class="break-timer">
                        <h3>休息时间</h3>
                        <div class="timer-circle break-circle">
                            <div class="timer-progress" id="break-timer-progress"></div>
                            <div class="timer-text">
                                <span id="break-timer-minutes">05</span>:<span id="break-timer-seconds">00</span>
                            </div>
                        </div>
                        <p>放松一下，稍后继续工作！</p>
                    </div>

                    <div class="break-content">
                        <div class="content-tabs">
                            <button class="tab-btn active" data-tab="games">小游戏</button>
                            <button class="tab-btn" data-tab="articles">小知识</button>
                            <button class="tab-btn" data-tab="relax">放松</button>
                        </div>

                        <div class="tab-content">
                            <div id="games-tab" class="tab-panel active">
                                <div class="game-options">
                                    <div class="game-card" id="minesweeper">
                                        <i class="fas fa-bomb"></i>
                                        <h4>扫雷</h4>
                                    </div>
                                    <div class="game-card" id="pixel-art">
                                        <i class="fas fa-paint-brush"></i>
                                        <h4>像素画</h4>
                                    </div>
                                    <div class="game-card" id="snake">
                                        <i class="fas fa-long-arrow-alt-right"></i>
                                        <h4>贪吃蛇</h4>
                                    </div>
                                </div>
                                <div id="game-container" class="game-container">
                                    <p>选择一个游戏开始</p>
                                </div>
                            </div>

                            <div id="articles-tab" class="tab-panel">
                                <div class="article">
                                    <h4>今日冷知识</h4>
                                    <p>蜂鸟是唯一能够倒着飞行的鸟类，它们的翅膀每秒可以拍打50-200次。</p>
                                </div>
                                <div class="article">
                                    <h4>编程小贴士</h4>
                                    <p>使用快捷键 Ctrl+Shift+L 可以在VSCode中选中所有相同的单词，提高编辑效率。</p>
                                </div>
                                <button id="more-facts">更多冷知识</button>
                            </div>

                            <div id="relax-tab" class="tab-panel">
                                <div class="relax-option">
                                    <h4>一分钟冥想</h4>
                                    <button id="meditation-btn"><i class="fas fa-headphones"></i> 开始</button>
                                </div>
                                <div class="relax-option">
                                    <h4>眼睛放松运动</h4>
                                    <p>每20分钟，向远处看20秒，缓解眼睛疲劳</p>
                                </div>
                                <div class="relax-option">
                                    <h4>伸展运动</h4>
                                    <button id="stretch-btn"><i class="fas fa-running"></i> 显示动作</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 底部状态栏 -->
        <footer class="footer">
            <div class="achievements">
                <i class="fas fa-trophy"></i>
                <span>成就: <span id="achievement-count">0/10</span></span>
            </div>
            <div class="status">
                <div class="status-indicator working">
                    <span>工作状态: </span>
                    <span id="status-text">专注</span>
                </div>
            </div>
            <div class="switch-button" id="emergency-btn">
                <i class="fas fa-exclamation-triangle"></i>
                <span>紧急模式</span>
            </div>
        </footer>
    </div>

    <!-- 成就弹窗 -->
    <div class="achievement-popup" id="achievement-popup">
        <div class="achievement-content">
            <i class="fas fa-trophy"></i>
            <h3>解锁成就!</h3>
            <p id="achievement-name">初级摸鱼师</p>
            <button id="close-achievement">确定</button>
        </div>
    </div>

    <!-- 紧急模式弹窗 -->
<div class="emergency-overlay" id="emergency-overlay">
    <div class="excel-container">
        <div class="excel-header">
            <div class="excel-title-bar">
                <div class="excel-icon"><i class="fas fa-file-excel"></i> Excel</div>
                <div class="excel-tabs">
                    <div class="excel-tab active">季度销售数据分析表.xlsx</div>
                    <div class="excel-tab">+</div>
                </div>
                <!-- 修改紧急模式弹窗中的Excel控制按钮部分 -->
                <div class="excel-controls">
                    <button class="window-control minimize-btn"><i class="fas fa-window-minimize"></i></button>
                    <button class="window-control maximize-btn"><i class="fas fa-window-maximize"></i></button>
                    <button class="window-control close-btn" id="close-emergency"><i class="fas fa-times"></i></button>
                </div>
            </div>
            <div class="excel-menu-bar">
                <div>文件</div>
                <div>开始</div>
                <div>插入</div>
                <div>页面布局</div>
                <div>公式</div>
                <div>数据</div>
                <div>审阅</div>
                <div>视图</div>
                <div>开发工具</div>
            </div>
            <div class="excel-toolbar">
                <div class="tool-group">
                    <button><i class="fas fa-cut"></i></button>
                    <button><i class="fas fa-copy"></i></button>
                    <button><i class="fas fa-paste"></i></button>
                </div>
                <div class="tool-group">
                    <select>
                        <option>Arial</option>
                        <option>Times New Roman</option>
                        <option>Calibri</option>
                    </select>
                    <select>
                        <option>11</option>
                        <option>12</option>
                        <option>14</option>
                    </select>
                </div>
                <div class="tool-group">
                    <button><i class="fas fa-bold"></i></button>
                    <button><i class="fas fa-italic"></i></button>
                    <button><i class="fas fa-underline"></i></button>
                </div>
                <div class="tool-group">
                    <button><i class="fas fa-align-left"></i></button>
                    <button><i class="fas fa-align-center"></i></button>
                    <button><i class="fas fa-align-right"></i></button>
                </div>
                <div class="tool-group">
                    <button><i class="fas fa-dollar-sign"></i></button>
                    <button><i class="fas fa-percentage"></i></button>
                    <button><i class="fas fa-sort-numeric-down"></i></button>
                </div>
            </div>
            <div class="excel-formula-bar">
                <div class="formula-label">fx</div>
                <div class="cell-address">B5</div>
                <input type="text" value="=SUM(B2:B4)" />
            </div>
        </div>
        <div class="excel-body">
            <div class="excel-column-headers">
                <div class="row-header"></div>
                <div>A</div>
                <div>B</div>
                <div>C</div>
                <div>D</div>
                <div>E</div>
                <div>F</div>
                <div>G</div>
                <div>H</div>
                <div>I</div>
                <div>J</div>
            </div>
            <div class="excel-content">
                <div class="excel-row">
                    <div class="row-header">1</div>
                    <div class="excel-cell">部门</div>
                    <div class="excel-cell">Q1</div>
                    <div class="excel-cell">Q2</div>
                    <div class="excel-cell">Q3</div>
                    <div class="excel-cell">Q4</div>
                    <div class="excel-cell">总计</div>
                    <div class="excel-cell">同比增长</div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                </div>
                <div class="excel-row">
                    <div class="row-header">2</div>
                    <div class="excel-cell">销售部</div>
                    <div class="excel-cell">¥234,500</div>
                    <div class="excel-cell">¥256,700</div>
                    <div class="excel-cell">¥298,450</div>
                    <div class="excel-cell">¥315,200</div>
                    <div class="excel-cell formula">¥1,104,850</div>
                    <div class="excel-cell">+15.2%</div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                </div>
                <div class="excel-row">
                    <div class="row-header">3</div>
                    <div class="excel-cell">市场部</div>
                    <div class="excel-cell">¥124,300</div>
                    <div class="excel-cell">¥142,500</div>
                    <div class="excel-cell">¥155,800</div>
                    <div class="excel-cell">¥178,900</div>
                    <div class="excel-cell formula">¥601,500</div>
                    <div class="excel-cell">+12.8%</div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                </div>
                <div class="excel-row">
                    <div class="row-header">4</div>
                    <div class="excel-cell">技术部</div>
                    <div class="excel-cell">¥342,100</div>
                    <div class="excel-cell">¥365,400</div>
                    <div class="excel-cell">¥389,200</div>
                    <div class="excel-cell">¥412,600</div>
                    <div class="excel-cell formula">¥1,509,300</div>
                    <div class="excel-cell">+20.5%</div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                </div>
                <div class="excel-row selected">
                    <div class="row-header">5</div>
                    <div class="excel-cell">客服部</div>
                    <div class="excel-cell selected">¥98,200</div>
                    <div class="excel-cell">¥112,300</div>
                    <div class="excel-cell">¥118,500</div>
                    <div class="excel-cell">¥125,700</div>
                    <div class="excel-cell formula">¥454,700</div>
                    <div class="excel-cell">+8.7%</div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                </div>
                <div class="excel-row">
                    <div class="row-header">6</div>
                    <div class="excel-cell">人力资源</div>
                    <div class="excel-cell">¥76,500</div>
                    <div class="excel-cell">¥81,200</div>
                    <div class="excel-cell">¥83,400</div>
                    <div class="excel-cell">¥89,700</div>
                    <div class="excel-cell formula">¥330,800</div>
                    <div class="excel-cell">+5.3%</div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                </div>
                <div class="excel-row">
                    <div class="row-header">7</div>
                    <div class="excel-cell">财务部</div>
                    <div class="excel-cell">¥112,400</div>
                    <div class="excel-cell">¥118,600</div>
                    <div class="excel-cell">¥123,800</div>
                    <div class="excel-cell">¥128,900</div>
                    <div class="excel-cell formula">¥483,700</div>
                    <div class="excel-cell">+7.1%</div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                </div>
                <div class="excel-row">
                    <div class="row-header">8</div>
                    <div class="excel-cell formula">总计</div>
                    <div class="excel-cell formula">¥988,000</div>
                    <div class="excel-cell formula">¥1,076,700</div>
                    <div class="excel-cell formula">¥1,169,150</div>
                    <div class="excel-cell formula">¥1,251,000</div>
                    <div class="excel-cell formula">¥4,484,850</div>
                    <div class="excel-cell">+14.3%</div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                </div>
                <div class="excel-row">
                    <div class="row-header">9</div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                </div>
                <div class="excel-row">
                    <div class="row-header">10</div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                </div>
                <div class="excel-row">
                    <div class="row-header">11</div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                </div>
                <div class="excel-row">
                    <div class="row-header">12</div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                </div>
                <div class="excel-row">
                    <div class="row-header">13</div>
                    <div class="excel-cell">备注：</div>
                    <div class="excel-cell long-text" colspan="5">2023年第四季度销售额超出预期，主要得益于新产品线的推出和假日季节促销活动的成功。</div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                </div>
                <div class="excel-row">
                    <div class="row-header">14</div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                </div>
                <div class="excel-row">
                    <div class="row-header">15</div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                    <div class="excel-cell"></div>
                </div>
            </div>
        </div>
        <div class="excel-footer">
            <div class="sheet-tabs">
                <div class="sheet-tab active">季度销售</div>
                <div class="sheet-tab">月度明细</div>
                <div class="sheet-tab">产品分析</div>
                <div class="sheet-tab">客户数据</div>
                <div class="sheet-tab">+</div>
            </div>
            <div class="zoom-controls">
                <span>100%</span>
                <button><i class="fas fa-minus-circle"></i></button>
                <button><i class="fas fa-plus-circle"></i></button>
            </div>
        </div>
    </div>
</div>

    <!-- 脚本文件 -->
    <script src="scripts/timer.js"></script>
    <script src="scripts/games.js"></script>
    <script src="scripts/achievements.js"></script>
    <script src="scripts/main.js"></script>
</body>
</html>
